/* 移动设备滚动条样式 */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 使滚动更流畅 */
* {
    -webkit-overflow-scrolling: touch;
}

/* 横向滚动容器 */
.scroll-container-x {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding-bottom: 8px; /* 为滚动条预留空间 */
}

/* 纵向滚动容器 */
.scroll-container-y {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding-right: 8px; /* 为滚动条预留空间 */
}

/* 隐藏滚动条但保留功能 */
.scroll-hidden::-webkit-scrollbar {
    display: none;
}

.scroll-hidden {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 页面主体滚动优化 */
html, body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* 自动应用隐藏滚动条到常见横向滚动元素 */
.stories-container,
.category-list,
.tabs-scrollable,
.horizontal-list {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    -ms-overflow-style: none;
    padding-bottom: 8px;
}

.stories-container::-webkit-scrollbar,
.category-list::-webkit-scrollbar,
.tabs-scrollable::-webkit-scrollbar,
.horizontal-list::-webkit-scrollbar {
    display: none;
}

/* 滚动容器内部元素间距 */
.scroll-container-x > * {
    display: inline-block;
    vertical-align: top;
}

/* 滚动阴影效果 - 提示有更多内容可滚动 */
.scroll-shadow-right {
    background-image: linear-gradient(to right, transparent, transparent 95%, rgba(0,0,0,0.05));
}

.scroll-shadow-left {
    background-image: linear-gradient(to left, transparent, transparent 95%, rgba(0,0,0,0.05));
}

/* 滚动吸附效果 */
.scroll-snap-x {
    scroll-snap-type: x mandatory;
}

.scroll-snap-item {
    scroll-snap-align: start;
} 